<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>

<body>
    <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
        <a class="navbar-brand" href="#">
		Bootstrap
		</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
		<span class="navbar-toggler-icon"></span>
		</button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">前端技术</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">最新技术</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link">教程API</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">深度好文</a>
                </li>
                <li class="nav-item"><a class="nav-link">留言板</a>
                </li>
            </ul>
            <ul class="navbar-nav justify-content-end">
                <li class="nav-item">
                    <a class="nav-link" href="#">登录</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">注册</a>
                </li>
            </ul>
        </div>
    </nav>
    <!-- 轮播图 -->
    <div id="carouselExampleIndicators" class="carousel slide carousel-fade w-100 mt-5" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="img/slide1.png" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
                <img src="img/slide2.png" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
                <img src="img/slide3.png" class="d-block w-100" alt="...">
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
		<span class="carousel-control-prev-icon" aria-hidden="true"></span>
		<span class="sr-only">Previous</span>
		</button>
        <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
		<span class="carousel-control-next-icon" aria-hidden="true"></span>
		<span class="sr-only">Next</span>
		</button>
    </div>
    <!-- 网站开发专业 -->
    <div class="trend-skills">
        <div class="container">
            <h2 class="mt-4 title">网站开发专业</h2>
            <p class="mb-2 mt-3">计算机技术应用得很广泛，不管是什么性质的单位都要用到计算机专业的人才，就业前景很好。</p>
            <div class="row mt-5">
                <div class="col-md-6">
                    <div class="media">
                        <img src="img/tab1-1.jpg" class="mr-3" alt="...">
                        <div class="media-body">
                            <h5 class="mt-1 text-truncate">PHP</h5>
                            <p class="mt-1 mb-1 text-muted text-justify">PHP是目前最流行的服务端Web程序开发语言之一</p>
                            <p class="mt-1 mb-1 text-muted text-justify">PHP主要的特点是语法简单易于学习、功能强大、灵活易用。</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="media">
                        <img src="img/tab1-2.jpg" class="mr-3" alt="...">
                        <div class="media-body">
                            <h5 class="mt-1 text-truncate">Bootstrap</h5>
                            <p class="mt-1 mb-1 text-muted text-justify">Bootstrap是目前最受欢迎的前端框架。</p>
                            <p class="mt-1 mb-1 text-muted text-justify">Bootstrap是基于 HTML、CSS、Javascript的，它简洁灵活。</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="media">
                        <img src="img/tab1-3.jpg" class="mr-3" alt="...">
                        <div class="media-body">
                            <h5 class="mt-1 text-truncate">JavaScript</h5>
                            <p class="mt-1 mb-1 text-muted text-justify">Javascript是一种基于对象和事件驱动的脚本语言。</p>
                            <p class="mt-1 mb-1 text-muted text-justify">Javascript同时也是一种广泛用于Web客户端开发的脚本语言。</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="media">
                        <img src="img/tab1-4.jpg" class="mr-3" alt="...">
                        <div class="media-body">
                            <h5 class="mt-1 text-truncate">jQuery</h5>
                            <p class="mt-1 mb-1 text-muted text-justify">jQuery是一个兼容多浏览器的Javascript框架。</p>
                            <p class="mt-1 mb-1 text-muted text-justify">jQuery已经成为最流行的Javascript框架。</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 最新技术 -->
    <div class="trend-skills">
        <div class="container">
            <h2 class="mt-4 title">最新技术</h2>
            <p class="mb-2 mt-3">计算机领域划时代的几大新技术 </p>
            <div class="row mt-5">
                <div class="col-lg-3 col-md-6">
                    <div class="card shadow-sm mb-4">
                        <img src="img/tab2-1.jpg" class="card-img-top" alt="...">
                        <div class="card-body">
                            <p class="card-text">人工智能（Artificial Intelligence），英文缩写为AI。它是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。</p>
                            <div class="d-flex justify-content-end">
                                <button type="button" class="btn btn-sm btn-outline-secondary">更多>></button>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="card shadow-sm mb-4">
                        <img src="img/tab2-2.jpg" class="card-img-top" alt="...">
                        <div class="card-body">
                            <p class="card-text">深度学习（Deep Learning）的概念源于人工神经网络的研究。含多隐层的多层感知器就是一种深度学习结构。深度学习通过组合低层特征形成更加抽象的……</p>
                            <div class="d-flex justify-content-end">
                                <button type="button" class="btn btn-sm btn-outline-secondary">更多>></button>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="card shadow-sm mb-4">
                        <img src="img/tab2-3.jpg" class="card-img-top" alt="...">
                        <div class="card-body">
                            <p class="card-text">狭义来讲，区块链是一种按照时间顺序将数据区块以顺序相连的方式组合成的一 种链式数据结构， 并以密码学方式保证的不可篡改和不可伪造的分布式账本。</p>
                            <div class="d-flex justify-content-end">
                                <button type="button" class="btn btn-sm btn-outline-secondary">更多>></button>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="card shadow-sm mb-4">
                        <img src="img/tab2-4.jpg" class="card-img-top" alt="...">
                        <div class="card-body">
                            <p class="card-text">Hadoop是一个由Apache基金会所开发的分布式系统基础架构。用户可以在不了解分布式底层细节的情况下，开发分布式程序。充分利用集群的威力进行高速运算和存储。</p>
                            <div class="d-flex justify-content-end">
                                <button type="button" class="btn btn-sm btn-outline-secondary">更多>></button>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 底部 -->
    <div class="text-center bg-dark pt-2 pb-2" style="color: #fff;">
        <p>hjs@2018 All Rights Reserved.</p>
        <p>联系方式：qq:13856487 邮箱：13856487@qq.com</p>
    </div>
</body>

</html>